<template>
  <div class="box">
    <RouterView></RouterView>

    <!-- 底部导航 -->
    <van-tabbar v-model="active" router replace v-show="counterStore.shownav">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/goods"
        >购物车</van-tabbar-item
      >
      <!-- <van-tabbar-item icon="user-o" to="/login">登录</van-tabbar-item> -->
      <!-- 条件渲染,更具登录状态改变显示标签 -->
      <van-tabbar-item icon="user-o" to="/login" v-if="!token"
        >登录</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" to="/mine" v-if="token"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useCounterStore } from "./stores/counter";
import { onBeforeRouteUpdate } from "vue-router";
let route = useRoute();
let counterStore = useCounterStore();
let token = ref<any>(null);
let active = ref<number>(0);
onMounted(() => {
  token.value = localStorage.getItem("token");
});
//侦听器解决导航标签样式与实际路由不匹配的问题
// onBeforeRouteUpdate((to: any) => {
//   if (to === "/login") {
//     active.value = 2;
//   } else if (to === "/home") {
//     active.value = 0;
//   } else if (to === "/goods") {
//     active.value = 1;
//   }
// });
</script>

<style scoped></style>
